﻿@namespace BootstrapBlazor.Components
@inherits BootstrapModuleComponentBase
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.js")]

<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString">
    <i class="fa-solid fa-search search-dialog-icon"></i>
    <input type="text" readonly placeholder="@SearchBoxPlaceHolder" />
    <div class="search-dialog-mask d-none">
        <div class="search-dialog shadow-lg" tabindex="0">
            <header class="search-dialog-input">
                <i class="fa-solid fa-search"></i>
                <input type="text" placeholder="@SearchBoxPlaceHolder" />
                <i class="fa-solid fa-times search-dialog-clear"></i>
            </header>
            <main class="search-dialog-main">
                <div class="search-dialog-list scroll">
                    <div class="search-dialog-empty-template">
                        @SearchResultPlaceHolder
                    </div>
                </div>
                <div class="search-dialog-menu scroll">
                </div>
            </main>
            @if (ShowFooter)
            {
                <footer class="search-dialog-footer">
                    @if (FooterTemplate == null)
                    {
                        @if (ShowKeyboardTips)
                        {
                            <div class="search-dialog-commands d-none d-md-flex">
                                <div><kbd>Enter</kbd> @EnterKeyText</div>
                                <div><kbd>ArrowUp</kbd> <kbd>ArrowDown</kbd> @ArrowKeyText</div>
                                <div><kbd>ESC</kbd> @EscKeyText</div>
                            </div>
                        }
                        @if (ShowSearchResult)
                        {
                            <div class="search-dialog-status"></div>
                        }
                        @if (ShowLogoText)
                        {
                            <div class="search-dialog-logo">
                                @LogoText
                            </div>
                        }
                    }
                    else
                    {
                        @FooterTemplate
                    }
                </footer>
            }
            <template>
                <div class="search-dialog-item-template">
                    <div class="search-dialog-item">
                        <a href="{url}" target="_blank">
                            <div class="search-dialog-item-title"><span>{title}</span><span class="badge text-bg-warning">{count}</span></div>
                            <div class="search-dialog-item-sub">{sub-title}</div>
                        </a>
                    </div>
                </div>
                <ul class="search-dialog-block-template">
                    <li>
                        <a href="{url}" target="_blank">
                            <div class="search-dialog-block-title"><span>{title}</span></div>
                            <div class="search-dialog-block-intro">{intro}</div>
                        </a>
                    </li>
                </ul>
                <div class="search-dialog-empty-template">
                    @SearchResultPlaceHolder
                </div>
            </template>
        </div>
    </div>
</div>
